<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix"><span>列表导航</span></div>
    <div class="bds">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="内容" name="1">
          <draggable element="div" style="padding: 10px;" v-model="data.list">
            <div class="container" v-for="(item, i) in data.list" :key="i">
              <i class="el-icon-error cancal" @click="dellist(i)"></i>
              <i class="el-icon-menu left"></i>
              <div class="content">
                <el-form size="medium" label-width="100px">
                  <el-form-item label="左侧图标">
                    <div class="icon_box">
                      <span class="hasIcon" v-show="item.icon != ''">
                        <i :class="item.icon"></i>
                        <i class="icon-abl-close el-icon-error" @click="removeIcon(item)"></i>
                        <span class="choose_bar" @click="selecticon(item, i)"><i class="txt">替换</i></span>
                      </span>
                      <span class="noIcon" v-show="item.icon == ''"><i class="el-icon-plus" style="color:#409EFF;" @click="selecticon(item, i)"></i></span>
                    </div>
                  </el-form-item>
                  <el-form-item label="左侧文字"><el-input type="text" placeholder="请输入内容" v-model="item.left_text" maxlength="10" show-word-limit></el-input></el-form-item>
                  <el-form-item label="右侧文字"><el-input type="text" placeholder="请输入内容" v-model="item.right_text" maxlength="4" show-word-limit></el-input></el-form-item>
                  <el-form-item label="链接地址">
                    <div @click="selectlink(item, i)"><Linkdiv :linkdata="item.linkdata"></Linkdiv></div>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </draggable>

          <el-button style="width: 100%" @click="addlist">添加</el-button>
        </el-collapse-item>
        <el-collapse-item title="内容样式" name="2">
          <div>
            <el-form label-width="100px" size="medium">
              <el-form-item label="左侧内容">
                <div class="bg-color">
                  <el-form size="medium" label-width="100px">
                    <el-form-item label="左侧文字" style="margin-bottom:12px"><ColorPicker :color="data.left" :name="'textcolor'"></ColorPicker></el-form-item>
                    <el-form-item label="左侧图标颜色"><ColorPicker :color="data.left" :name="'iconcolor'"></ColorPicker></el-form-item>
                  </el-form>
                </div>
              </el-form-item>
              <el-form-item label="右侧内容">
                <div class="bg-color">
                  <el-form size="medium" label-width="100px">
                    <el-form-item label="右侧文字" style="margin-bottom:12px"><ColorPicker :color="data.right" :name="'textcolor'"></ColorPicker></el-form-item>
                    <el-form-item label="图标" style="margin-bottom:12px">
                      <!--           <div class="icon_box">
                        <span class="hasIcon" v-show="data.right.icon != ''">
                          <i :class="data.right.icon"></i>
                          <i class="icon-abl-close el-icon-error" @click="removeIcon('left_icon')"></i>
                          <span class="choose_bar" @click="chooseIcon"><i class="txt">替换</i></span>
                        </span>
                        <span class="noIcon" v-show="data.right.icon == ''"><i class="el-icon-plus" style="color:#409EFF;" @click="chooseIcon"></i></span>
                      </div> -->
                      <div class="icon_box">
                        <span class="hasIcon" v-show="data.right.icon != ''">
                          <i :class="data.right.icon"></i>
                          <i class="icon-abl-close el-icon-error" @click="data.right.icon=''"></i>
                          <span class="choose_bar" @click="selecticonr()"><i class="txt">替换</i></span>
                        </span>
                        <span class="noIcon" v-show="data.right.icon == ''"><i class="el-icon-plus" style="color:#409EFF;" @click="selecticonr()"></i></span>
                      </div>
                    </el-form-item>
                    <el-form-item label="右侧图标颜色"><ColorPicker :color="data.right" :name="'iconcolor'"></ColorPicker></el-form-item>
                  </el-form>
                </div>
              </el-form-item>
              <el-form-item label="背景颜色">
                <ColorPicker :color="data" :name="'bgcolor'"></ColorPicker>
          <!--      <div class="color_div">
                  <el-color-picker size="medium" v-model="data.bgcolor"></el-color-picker>
                  <div class="input-with-reset">
                    <el-input size="medium" class="" v-model="data.bgcolor">
                      <template slot="prepend">
                        #
                      </template>
                      <el-button size="medium" @click="data.bgcolor = '#FFFFFF'" slot="append">重置</el-button>
                    </el-input>
                  </div>
                </div> -->
              </el-form-item>
              <el-form-item label="上间距">
                <div class="slider_box">
                  <el-slider class="slider_item" :max="50" v-model="data.padding.top"></el-slider>
                  <el-input-number v-model="data.padding.top" :controls="false" :min="0" :max="50"></el-input-number>
                </div>
              </el-form-item>

              <el-form-item label="下间距">
                <div class="slider_box">
                  <el-slider class="slider_item" :max="50" v-model="data.padding.bottom"></el-slider>
                  <el-input-number v-model="data.padding.bottom" :controls="false" :min="0" :max="50"></el-input-number>
                </div>
              </el-form-item>

              <el-form-item label="左右间距">
                <div class="slider_box">
                  <el-slider class="slider_item" :max="50" v-model="data.padding.lr"></el-slider>
                  <el-input-number v-model="data.padding.lr" :controls="false" :min="0" :max="50"></el-input-number>
                </div>
              </el-form-item>
              <el-form-item label="上边角">
                <div class="slider_box">
                  <el-slider class="slider_item" :max="50" v-model="data.radius.top"></el-slider>
                  <el-input-number v-model="data.radius.top" :controls="false" :min="0" :max="50"></el-input-number>
                </div>
              </el-form-item>
              <el-form-item label="下边角">
                <div class="slider_box">
                  <el-slider class="slider_item" :max="50" v-model="data.radius.bottom"></el-slider>
                  <el-input-number v-model="data.radius.bottom" :controls="false" :min="0" :max="50"></el-input-number>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-card>
</template>

<script>
import draggable from 'vuedraggable';
import ColorPicker from '@/components/ColorPicker/index';
import Linkdiv from '@/components/Link/index';

export default {
  data() {
    return {
      activeNames: ['1', '2', '3']
    };
  },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  components: {
    draggable,
    ColorPicker,
    Linkdiv
  },
  methods: {
    selectlink(item, i) {
      this.acivedata = item;
      this.activid = i;
      this.$parent.showlinkselcet(item);
    },
    getAData(item) {
      this.acivedata.linkdata=item
    },
    selecticonr() {
      this.righticon = true;
      this.$parent.showiconselcet();
    },
    selecticon(item, i) {
      this.righticon = false;
      this.acivedata = item;
      this.activid = i;
      this.$parent.showiconselcet();
    },
    geticon(data) {
      if (this.righticon) {
        this.data.right.icon = data;
      } else {
        this.acivedata.icon = data;
      }
    },
    getimg(img) {
      this.data.imgbg = img;
    },
    //删除图标
    removeIcon(item) {
      item.icon = '';
    },
    //选择图标
    chooseIcon() {
      this.$alert('功能暂未开发');
    },
    addlist() {
      this.data.list.push({
        icon: '',
        linkdata: {
          link: '',
          name: '',
          id: '',
          type: ''
        },
        right_text: '',
        left_text: '文字' + (this.data.list.length + 1)
      });
    },
    dellist(i) {
      this.data.list.splice(i, 1);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  align-items: center;
  border: 1px solid #e9edef;
  background: #f4f6f8;
  padding: 10px;
  margin-bottom: 20px;
  position: relative;

  > i {
    font-size: 24px;
  }

  &:hover {
    .cancal {
      display: block;
    }
  }

  .cancal {
    font-size: 20px;
    position: absolute;
    right: -10px;
    top: -10px;
    cursor: pointer;
    display: none;
  }

  .content {
    flex: 1;
  }
}

.icon_box {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  position: relative;

  .icon-abl-close {
    position: absolute;
    top: -6px;
    right: -9px;
    color: rgba(0, 0, 0, 0.3);
    font-size: 16px;
  }

  &:hover {
    .choose_bar {
      display: block;
    }
  }

  .choose_bar {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    line-height: 18px;
    text-align: center;
    width: 100%;

    i.txt {
      display: inline-block;
      font-style: normal;
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
      letter-spacing: 2px;
    }
  }
}

.select_link {
  background: #fff;

  .select_btn {
    height: 36px;
    line-height: 28px;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    color: #2d8cf0;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;

    &:hover {
      border-color: #2d8cf0;
    }
  }
}
.bg-color {
  border: 1px solid #e9edef;
  box-sizing: border-box;
  padding: 20px 0;
  border-radius: 2px;
  background: #f4f6f8;
}
</style>
